<template>
    <div class="module-box">
        <div class="module-min" v-if="isModule">
            <div class="item-min" @click="showModule(1)">
                <a-icon type="appstore" /> 模块
            </div>
            <div class="item-min" @click="showModule(2)">
                <a-icon type="skin" /> 样式
            </div>
            <div class="item-min" @click="showModule(3)">
                <a-icon type="setting" /> 设置
            </div>
        </div>
        <div class="module-max" v-else>
            <a-tabs :default-active-key="1" :activeKey="activeKey" @change="callback" size="small" :tabBarGutter="2">
                <a-tab-pane :key="1">
                    <div slot="tab">
                        <a-icon type="appstore" /> 模块
                    </div>
                    <div class="module-choice">

                        <div class="module-common">
                            <template v-for="(item,index) in moduleList">
                                <div class="module-type" v-if="item.className">{{item.className}}</div>
                                <div class="common-item" v-if="item.title" @dragstart="dragStartTitle" @ondrag="onDragTitle" @dragend="dragEndTitle" :draggable="true" @click="clickTitle()">
                                    <a-icon :type="item.icon" />
                                    <div>{{item.title}}</div>
                                </div>
                            </template>
                        </div>

                    </div>
                </a-tab-pane>
                <a-tab-pane :key="2">
                    <div slot="tab">
                        <a-icon type="skin" /> 样式
                    </div>

                </a-tab-pane>
                <a-tab-pane :key="3">
                    <div slot="tab">
                        <a-icon type="setting" /> 设置
                    </div>

                </a-tab-pane>
            </a-tabs>
            <div class="close" @click="hideModule">
                <a-icon type="close" />
            </div>
        </div>
    </div>
</template>
<script>
import mixins from "../mixins/publicFunction";
export default {
    mixins: [mixins],
    data () {
        return {
            isModule: true,
            activeKey: 1,
            currentModule: null,

        }
    },
    methods: {
        showModule (key) {
            this.isModule = false;
            this.activeKey = key;
        },
        hideModule () {
            this.isModule = true;
        },
        callback (e) {
            this.activeKey = e;
        },
        dragStartTitle (e) {
            //当前拖动的组件
            this.currentModule = e.target.dataset.type;
        },
        onDragTitle () {
            //拖动中
        },
        dragEndTitle () {
            //拖拽完成置空当前正在拖拽的组件类型
            this.currentModule = null;
        },
        clickTitle () {

        }
    }
}
</script>
<style lang="less" scoped>
    .module-box {
        position: fixed;
        top: 10px;
        left: 10px;

        .ant-tabs-bar {
            margin: 0px !important;
        }

        .module-min {
            display: flex;
            flex-wrap: wrap;
            width: 60px;

            .item-min {
                flex: 0 0 100%;
                margin-bottom: 15px;
                text-align: center;
                font-size: 14px;
                line-height: 32px;
                padding: 0 5px;
                cursor: pointer;
                border-radius: 8px;
                background: #ffffff;
                box-shadow: 0 5px 5px #ccc;
            }

            .item-min:hover {
                background: #1890ff;
                color: #ffffff;
            }
        }

        .module-max {
            position: relative;
            border-radius: 8px;
            height: 500px;
            width: 300px;
            box-shadow: 0px 0px 5px #ccc;
            background: #ffffff;

            .close {
                font-size: 16px;
                position: absolute;
                right: 10px;
                top: 9px;
                cursor: pointer;
            }

            .module-choice {
                padding: 0 10px;
                font-size: 12px;
                height: 440px;
                overflow-y: auto;
            }

            .module-common {
                display: flex;
                flex-wrap: wrap;
                text-align: center;
                padding-bottom: 10px;
                .module-type {
                    text-align: left;
                    border-bottom: 1px solid #ccc;
                    margin-top: 10px;
                    font-weight: bold;
                    flex: 0 0 100%;
                }
                .common-item {
                    flex: 0 0 33.33%;
                    padding: 10px 0;
                    box-sizing: border-box;
                    margin-top: 10px;
                    cursor: pointer;
                    border-radius: 4px;
                    i {
                        font-size: 18px;
                    }
                }

                .common-item:hover {
                    color: #1890ff;
                    box-shadow: 0px 0px 5px #ccc;
                }
            }
        }
    }
</style>